<template>
  <div id="PieVoice"></div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
export default {
  name: 'PieVoice',
  data() {
    return {
      myChart: null,
      // 数据--
      simdata: {
        // 总量
        a: 68,
        // 脱帽报警
        b: 34,
        // 近电报警
        c: 16,
        // 离开围栏
        d: 18
      },
      // 剩余使用量
      percent: null
    }
  },
  created() {
    echarts.use([
      TooltipComponent,
      LegendComponent,
      PieChart,
      CanvasRenderer,
      LabelLayout,
      TitleComponent
    ])
  },
  mounted() {
    // 计算中间饼图使用率
    // this.percent = (this.simdata.b / this.simdata.a).toFixed(2) * 100 + '%'
    this.percent = 68
    // 找到这个容器
    this.myChart = echarts.init(this.$el)
    // 配置项
    let option = {
      // 鼠标移入上面时候-提示框组件
      tooltip: {
        trigger: 'item'
      },
      // 实例title
      legend: {
        top: '25%',
        right: 'right',
        // 纵向布局
        orient: 'vertical',
        textStyle: {
          color: '#ffffff' // 设置字体颜色为红色
        }

        // 图例高度
        // itemHeight: 6,
        // show: false
      },
      // 工具箱-下载
      toolbox: {
        // feature: {
        //   saveAsImage: {}
        // }
      },
      // 饼图中间-数据
      title: {
        text: this.percent,
        top: 'middle',
        left: '33%',
        width: 110,
        textStyle: {
          color: '#ffffff',
          fontSize: 27,
          fontWeight: 'bold'
        }
      },
      series: [
        {
          name: '语音套餐',
          type: 'pie',
          roseType:'radius',
          // 饼图半径
          radius: ['45%', '70%'],
          // 相对于父容器比例
          center: ['38%', '50%'],
          // 防止标签间的重叠-默认开启true
        //   avoidLabelOverlap: false,
          // 数据名称-静态
          label: {
            // formatter: '{name|{c}}分钟\n\n{num|{b}}',
            // padding: [0, -70],
            // width: 100,
            // rich: {
            //   name: {
            //     fontSize: 14,
            //     color: '#ffffff',
            //     fontWeight: 'bold'
            //   },
            //   num: {
            //     fontSize: 12,
            //     color: '#999'
            //     //lineHeight:15
            //   }
            // }
          },
          // 选中图标-标题样式-静态
          emphasis: {},
          // 引导线
          //   labelLine: {
          //     length: 15,
          //     length2: 80
          //   },
          data: [
            {
              value: this.simdata.b,
              name: '脱帽报警 50%',
              itemStyle: { color: '#fff691' }
            },
            {
              value: this.simdata.c,
              name: '静电报警 23%',
              itemStyle: { color: '#2ab0ff' }
            },
            {
              value: this.simdata.d,
              name: '离开围栏 27%',
              itemStyle: { color: '#c436ea' }
            }
          ]
        }
      ]
    }
    // 渲染数据
    this.myChart.setOption(option)
  }
}
</script>
<style lang="scss" scoped>
#PieVoice {
  width: 100%;
  height: 100%;
}
</style>
